<style>
	* {
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
	}

	/* 顶部 */
	.top {
		width: 100%;
		height: 40px;
		line-height: 40px;
		background-color: #333333;
		color: white;
		text-align: center;
	}

	ul li {
		display: inline-block;
	}

	ul a {
		color: white;
		padding: 10px;
	}

	/* 营销字 */
	.yx {
		display: inline-block;
		width: 52px;
		border-radius: 10px;
		height: 30px;
		line-height: 30px;

		background-color: #42B983;
	}

	/* 营销电话 */
	.top1 {
		width: 100%;
		height: 80px;
	}

	.top1 .aq {
		width: 1200px;
		height: 80px;
		/* line-height: 80px; */
		margin: 0 auto;
		/* background-color: antiquewhite; */
	}

	.top1 .aq a {
		color: #666666;
	}

	/* bana */
	#banna {
		width: 100%;
		height: 350px;
		background-color: #42B983;
	}

	#banna .aq {
		width: 1200px;
		height: 80px;
		/* line-height: 80px; */
		margin: 0 auto;
		/* background-color: antiquewhite; */
	}

	#banna img {
		width: 100%;
		height: 350px;
	}
</style>
<style type="text/css">
	/* CSS Document */
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section,
	summary,
	time,
	mark,
	audio,
	video,
	input {
		margin: 0;
		padding: 0;
		border: none;
		outline: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
		text-decoration: none;
		list-style-type: none;
	}

	html,
	body,
	form,
	fieldset,
	p,
	div,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		-webkit-touch-callout: none;
		-webkit-text-size-adjust: none;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.banner_inner {
		width: 1010px;
		margin: 0 auto;
	}

	.content_inner {
		width: 1010px;
		margin: 0 auto;
	}

	.title_01 {
		font-size: 28px;
		color: #333;
		font-weight: bold;
		line-height: 50px;
		padding-top: 50px;
	}

	.zixun h3 {
		font-size: 18px;
		color: #555;
		line-height: 42px;
		padding: 8px 0 0 0;
		margin: 0;
	}

	.zixun h4 {
		font-size: 16px;
		color: #555;
		line-height: 42px;
		font-weight: bold;
		padding: 0;
		margin: 0;
	}

	.zixun span {
		width: 6px;
		height: 16px;
		background-color: #74bd33;
		float: left;
		margin-top: 13px;
		margin-right: 12px;
	}

	.title_02 {
		font-size: 28px;
		color: #333;
		font-weight: bold;
		line-height: 50px;
		padding-top: 17px;
	}

	.zixun a {
		color: #555;
	}

	.zixun a:hover {
		text-decoration: underline;
		color: #555;
	}

	/*index_nav&content_nav*/
	body {
		background-color: #fafafa;
	}

	.index_nav_left {
		margin-left: 30px;
		width: 1010px;
		margin: 0 auto;
	}

	.index_nav_right {
		float: right;
		margin-right: 60px;
	}

	.index_nav_left a {
		float: left;
		font-size: 15px;
		line-height: 36px;
		margin-right: 6px;
		color: #ffffff;
		cursor: pointer;
		padding: 0 4px;
	}

	.index_nav_left a:hover {
		color: #84dd35;
	}

	.index_nav_left a:active {
		color: #ffffff;
	}

	.index_nav_left a:visted {
		color: #ffffff;
	}

	/*.index_nav_left a:link{color:#ffffff;}*/
	.index_nav_right a {
		float: right;
		font-size: 16px;
		line-height: 36px;
		margin-left: 20px;
		color: #ffffff;
		cursor: pointer;
	}

	.index_nav_right a:hover {
		color: #84dd35;
	}

	.index_nav_right a:active {
		color: #ffffff;
	}

	.index_nav_right a:visted {
		color: #ffffff;
	}

	.index_nav_right a:link {
		color: #ffffff;
	}

	.index_nav_right_login {
		width: 80px;
		height: 36px;
		background-color: #6dc122;
		text-align: center;
	}

	.index_nav_right .index_nav_right_login:hover {
		background-color: #5eae17;
		color: #ffffff;
	}

	.index_nav {
		width: 100%;
		height: 36px;
		background-color: #1C391B;
	}

	.index_nav_left {
		position: relative;
	}

	.index_nav_left {
		position: relative;
	}

	.nav_more {
		background: #1C391B;
		position: absolute;
		top: 36px;
		left: 875px;
		z-index: 90;
		display: none;
		padding: 0 5px;
	}

	.nav_more {
		padding: 0 0px;
	}

	.nav_more li {
		padding: 0px;
		width: 65px;
		float: left;
		text-align: center;
		line-height: 40px;
		margin-top: 10px;
		list-style: none;
	}

	.nav_more li a {
		color: #404040;
		font-size: 16px;
		width: 100%;
	}

	.nav_more li a:hover {
		color: #2d9300;
	}

	.nav_more {
		width: 130px;
		background: #FFFFFF;
		z-index: 3333;
		color: #000000;
		box-shadow: 0 0 10px #666666;
		border-radius: 4px;
		display: none;
		padding-bottom: 10px;

	}

	.nav_more:after {
		content: "";
		position: absolute;
		width: 15px;
		height: 15px;
		top: -5px;
		left: 57.5px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		background: #fff;
		box-shadow: -1px -1px 5px -2px rgba(0, 0, 0, 0.5);
	}

	.clear-pading {
		margin-right: 0px;
	}

	.content_nav {
		height: 60px;
		width: 100%;
		background-color: #fafafa;
	}

	.content_nav_box {
		width: 1010px;
		height: 60px;
		margin: auto;
	}

	.content_nav_left {
		float: left;
	}

	.content_nav_right {
		float: right;
	}

	.tom_pc_logo {
		float: left;
		margin-right: 16px;
	}

	.nav_left01 {
		float: left;
		font-size: 18px;
		color: #949393;
		margin-right: 8px;
		margin-top: 21px;
		cursor: pointer;
	}

	.nav_left02 {
		float: left;
		margin-right: 8px;
		margin-top: 28px;
	}

	.nav_left01:hover {
		color: #65b51e;
	}

	.nav_left01:active {
		color: #949393;
	}

	.nav_left01:visted {
		color: #949393;
	}

	.nav_left01:link {
		color: #949393;
	}

	.right_search_box {
		overflow: hidden;
		border: solid 1px #cccccc;
		border-radius: 6px;
		margin-top: 10px;
		background-color: #f5f6f7;
		float: right;
	}

	.right_search_box input {
		float: left;
		height: 36px;
		background-color: #f5f6f7;
		width: 287px;
		padding-left: 10px;
		color: #999999;
		font-size: 14px;
		line-height: 36px;
	}

	.search_box_btn {
		background-color: #f5f6f7;
		float: left;
		width: 39px;
		height: 38px;
		cursor: pointer;
	}


	/* 底部 */
	.content_bottom_box {
		width: 100%;
		height: 60px;
		clear: both;
	}

	.content_bottom_kong {
		width: 100%;
		height: 40px;
		clear: both;
		background-color: #ffffff;
	}

	.content_bottom_line {
		width: 1160px;
		margin: auto;
		height: 1px;
		background-image: url(/news/system/modules/my.opencms.news/resources/pc/pic/content_bottom_box_line.png);
		background-repeat: no-repeat;
		background-position: left center;
		position: absolute;
		left: 50%;
		margin-left: -580px;
	}

	.content_bottom {
		width: 1100px;
		margin: auto;
		height: 50px;
		position: relative;
		margin-top: 30px;
	}

	.content_bottom1 {
		overflow: hidden;
		width: 656px;
		margin-left: 223px;
		padding-top: 27px;
		padding-bottom: 12px;
		padding-left: 107px;
	}

	.content_bottom2 {
		font-size: 12px;
		width: 656px;
		margin-left: 223px;
		text-align: center;
		padding-bottom: 5px;
	}

	.content_bottom3 {
		font-size: 12px;
		width: 656px;
		margin-left: 223px;
		text-align: center;
		padding-bottom: 35px;
	}

	.content_bottom1 a {
		font-size: 14px;
		float: left;
		color: #3b3b3b;
		padding-left: 15px;
		padding-right: 15px;
		cursor: pointer;
	}

	.content_bottom1 a:hover {
		color: #1ca408;
	}

	.content_bottom1 a:active {
		color: #3b3b3b;
	}

	.content_bottom1 a:visted {
		color: #3b3b3b;
	}

	.content_bottom1 a:link {
		color: #3b3b3b;
	}

	/*end*/
	/* 右边悬浮 */
	.t1img {
		width: 20px;
		height: 20px;
		background-image: url(https://marketing.tom.com/img/service.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
	}

	.t2img {
		width: 20px;
		height: 20px;
		margin-top: 10px;
	}

	.t3img {
		width: 20px;
		height: 20px;
		background-image: url(https://marketing.tom.com/img/wx.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
	}

	.t4img {
		width: 20px;
		height: 20px;
		background-image: url(https://marketing.tom.com/img/top.png);
		background-repeat: no-repeat;
		margin-left: 20px;
		margin-top: 10px;
	}

	.dada {
		width: 58px;
		height: 60px;
		margin: 0 auto;
		text-align: center;
		margin-top: 15px;
		border: 1px solid #999999;
		background-color: #FAFAFA;
	}
</style>

<template>
	<div id="root">

		<div class="top">
			<ul>
				<a href="javascript:void(0)" @click="ad()">
					<li>首页</li>
				</a>
				<a href="#">
					<li>资讯</li>
				</a>
				<a href="#">
					<li>流行</li>
				</a>
				<a href="#">
					<li>娱乐</li>
				</a>
				<a href="#">
					<li>体育</li>
				</a>
				<a href="#">
					<li>明星</li>
				</a>
				<a href="#">
					<li>时尚</li>
				</a>
				<a href="#">
					<li>游戏</li>
				</a>
				<a href="#">
					<li>旅游</li>
				</a>
				<a href="#">
					<li>生活</li>
				</a>
				<a href="#">
					<li>母婴</li>
				</a>
				<a href="#">
					<li class="yx">营销</li>
				</a>
				<a href="#">
					<li>邮箱</li>
				</a>
				<a href="#">
					<li>商业</li>
				</a>
				<a href="#">
					<li>视频</li>
				</a>
				<a href="#">
					<li>财经</li>
				</a>
				<a href="#">
					<li>健康</li>
				</a>
				<a href="#">
					<li>段子</li>
				</a>
				<a href="#">
					<li>消费</li>
				</a>
				<a href="#">
					<li>汽车</li>
				</a>
				<a href="#">
					<li>购物</li>
				</a>
				<a href="javascript:void(0)" @click="home()">
					<li>科技</li>
				</a>
				<router-view />
			</ul>
		</div>

		<!-- 广告页 -->
		<div class="top1">
			<div class="aq">
				<img style=" float: left;margin-top: 10px;inline-block;width: 143px;height: 60px;"
					src="https://www.tom.com/partner/tom_partner/tom_pc_logo.png">
				<span style="float: left;margin-top: 35px;margin-left: 10px;">
					<a href="">首页 > </a>
					<a href="">广告服务</a>
				</span>
			</div>
		</div>
		<!-- 大图 -->
		<div id="banna">
			<div class="aq">
				<img src="https://www.tom.com/partner/img/banner_ta.png">
			</div>
		</div>
		<!-- 中间部分 -->
		<div class="content_body_box">
			<div class="content_inner">

				<div class="title_01">TOM资讯</div>

				<div class="zixun">
					<h3>一款轻奢即时资讯平台，聚合众多资讯平台信息，是国内了解娱乐、时尚、汽车等资讯最便捷的途径之一。</h3>
					<span></span>
					<h4>软文发布合作、内容授权转载合作、频道、栏目外包合作</h4>
					<span></span>
					<h4>PC、移动端硬广合作、发布会合作、品牌宣传合作</h4>
					<span></span>
					<h4>原生广告合作、流量互换合作、友链互换合作</h4>
				</div>

				<div class="title_02">TOM邮箱</div>
				<div class="zixun">
					<h3>TOM集团旗下的专业邮箱品牌，拥有1.5亿多邮箱用户，针对企业客户提供7*24小时不间断服务。拥有提前预防机制，确保系统稳定性。并于2017年推出新产品随心邮，随时随地在微信里收发邮件，快速提醒，绝不耗电。
					</h3>
					<span></span>
					<h4>VIP邮箱：短靓号注册、超大容量、专业邮箱管家服务</h4>
					<span></span>
					<h4>企业邮箱：无须另装APP，在微信里收发邮件的企业邮箱，为您独家定制OA平台</h4>
					<span></span>
					<h4>免费邮箱：特色靓号申请、批量账号、优质文字及图片广告投放</h4>
					<span></span>
					<h4>随心邮：在微信里收发邮件，最便捷的收发渠道、最独特的办公方式，撤回、阅后即焚，更多亮点</h4>
				</div>

				<div class="title_02">TOM游戏</div>
				<div class="zixun">
					<span></span>
					<h4>《玩乐斗地主》包厢区可无限开房，新版本已上线APP Store和应用宝两大移动应用商店</h4>
					<span></span>
					<h4>《金豆俱乐部》可在微信公众号玩到我们提供的大量H5游戏，可独家定制、活动预热、品牌推广、用户活跃、微信号粉丝活跃等合作</h4>
				</div>

				<div class="title_02">广告、商务合作部</div>
				<div class="zixun">
					<h3>非常感谢您对TOM的关注，如有商务合作意向，请与我们联系。<br>联系电话：010-58206500-3520<br>联系邮箱：<a
							href="mailto:BD@tomonline-inc.com">BD@tomonline-inc.com</a><br>联系QQ : 384128555</h3>
				</div>
			</div>
		</div>
		<!-- 底部 -->
		<div class="content_bottom_box">
			<div class="content_bottom">
				<div class="content_bottom_line"></div>
				<div class="content_bottom1">
					<a href="#"  rel="nofollow">TOM集团</a>
					<a href="#">邮乐购物</a>
					<a href="#">合作伙伴</a>
					<router-link href="javascript:void(0)" to="Home">广告投放</router-link>
					<a>加入TOM</a>
				</div>
				<div class="content_bottom2">Copyright © 2018 TOM.COM Corporation, All Rights Reserved 雷霆万钧版权声明</div>
				<div class="content_bottom3">违法信息/未成年人举报：010-85181169&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;举报邮箱/未成年人举报：<a
						href="mailto:jubao@tomonline-inc.com" style="color:#333;">jubao@tomonline-inc.com</a></div>
			</div>
		</div>
		<!-- 右边 -->
		
		<div class="right" style="position: fixed;right: 0;bottom: 100px;
			 text-align: center;height: 270px;width: 60px;">
			 
			<div class="dada">
				<div class="t1img"></div>
				<div class="t2zi">客服</div>
			</div>

			<div class="dada">
				<img class="t2img" src="https://marketing.tom.com/img/help.png">
				<div class="t3zi">帮助</div>
			</div>

			<div class="dada">
				<div class="t3img"></div>
				<div class="t4zi">微信</div>
			</div>

			<div class="dada" @click="top()">
				<div class="t4img"></div>
				<div class="t5zi">TOP</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'ad',
		methods: {

			ad() {
				// pushstate
				this.$router.push('/shouye');
			},
			home() {
				this.$router.push('/Home');
			},
			top() {
				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}
		}
	}
</script>
